<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-input v-model="content" style="width: 200px" size="small" placeholder="请输入用户名/邮箱/手机"></el-input>
        <el-button size="mini" style="margin-left: 10px" type="primary" @click="doquery()"><i
          class="iconfont icon-search"></i> 查询
        </el-button>
        <el-button size="mini" type="success" @click="toadd"><i class="iconfont icon-add"></i> 添加</el-button>
        <el-button size="mini" type="danger"><i class="iconfont icon-delete"></i> 批量删除</el-button>
      </el-col>
      <el-col :span="12" style="display: flex;justify-content: flex-end;">
        <el-button-group>
          <el-tooltip effect="dark" content="导出到excel" placement="top">
            <el-button size="mini" @click="exportusers"><i class="iconfont icon-Excel"></i></el-button>
          </el-tooltip>
        </el-button-group>
      </el-col>
    </el-row>

    <el-table
      :data="users"
      stripe
      style="width: 100%;" size="mini" @selection-change="selectTableRows">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column sortable
                       prop="id"
                       label="ID"
                       width="60">
      </el-table-column>
      <el-table-column
        prop="name" sortable
        label="姓名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="roles"
        label="角色" width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="180">
      </el-table-column>
      <el-table-column
        prop="mobile" sortable
        label="手机号码" width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态" :formatter="statusFormatter" width="60">
      </el-table-column>

      <el-table-column
        label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button @click="toEdit(scope.row)" type="warning" size="mini">编辑</el-button>
          <el-button type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>


    </el-table>
    <el-pagination
      @size-change="pageSizeChange"
      @current-change="pageChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40,100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


    <el-dialog :title="title" :visible.sync="userFormVisiable" :close-on-click-modal="false" width="500px">
      <el-form :model="form" size="small">

        <el-form-item label="姓名" :label-width="formLabelWidth" style="margin-right: 80px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" style="margin-right: 80px">
          <el-input v-model="form.password" type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" style="margin-right: 80px">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" style="margin-right: 80px">
          <el-input v-model="form.mobile" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="选择角色" :label-width="formLabelWidth" style="margin-right: 80px">
          <el-select v-model="form.roleidarr" multiple placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="role in roles"
              :key="role.id"
              :label="role.remark"
              :value="role.id">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="userFormVisiable = false">取 消</el-button>
        <el-button type="primary" @click="saveUser">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

  import axios from "axios"
  import qs from "qs"

  export default {
    data() {
      return {

        //用户编辑窗口
        title: "",
        userFormVisiable: false,
        formLabelWidth: '100px',
        form: {
          roleidarr: []
        },
        roles: [],
        content: "",
        users: [],
        currentPage: 1,
        total: 100,
        pageSize: 10,
      }
    },
    methods: {


      exportusers(){
        window.location.href = "/sys/user/export";
//        axios.get("/sys/user/export").then((res)=>{});
      },
      //选择表格行
      selectTableRows(val) {
        console.log(val)
      },

      //添加用户
      saveUser() {
        this.userFormVisiable = false;
        //提交到后台
        var that = this;

        var roleids = "";
        for (var i in this.form.roleidarr) {
          roleids = roleids + "," + this.form.roleidarr[i];
        }
        //选了角色才设置
        if (roleids) {   // if(roleids != null && roleids != '' && roleids != undefined)
          roleids = roleids.substring(1);
          this.form.roleids = roleids;
        }
        var s = qs.stringify(this.form);
        axios.post("/sys/user", s).then(function (response) {
          var mes = response.data.message;
          if (response.data.code == '200') {
            that.$notify({
              title: '成功',
              message: mes,
              type: 'success'
            });
            that.page();
          } else {
            that.$notify.error({
              title: '错误',
              message: mes
            });
          }
        })

      },
      //状态列格式化
      statusFormatter(row, column) {
        return row.status == "1" ? '已启用' : "已禁用"
      },
      //新增
      toadd() {
        this.title = "新增用户";
        this.userFormVisiable = true;
        //查询角色
        this.getRoles();
        this.form = {
          roleidarr: []
        };
      },

      //查询角色
      getRoles() {
        if (this.roles.length == 0) {
          //去后台查
          var that = this;
          axios.get("/sys/role/all").then((res) => {
            that.roles = res.data
          })
        }
      },

      //编辑
      toEdit(row) {
        this.getRoles();
        this.title = "编辑用户";
        this.userFormVisiable = true;
        var data = this.copy(row);
        var idstr = row.roleids;
        if (idstr) {
          var idarry = idstr.split(",");
          var ids = [];
          for (var i in idarry) {
            ids.push(idarry[i] * 1)
          }
          data.roleidarr = ids;
        }

        this.form = data;
      },
      copy(obj) {
        var newobj = {};
        for (var attr in obj) {
          newobj[attr] = obj[attr];
        }
        return newobj;
      },
      doquery() {
        this.currentPage = 1;
        this.page();
      }
      ,
      pageSizeChange(val) {
        this.pageSize = val;
        this.page();

      }
      ,
      pageChange(val) {
        this.currentPage = val;
        this.page();
      }
      ,
      page() {
        var that = this;
        axios.get("/sys/user/list", {
            params: {
              content: that.content,
              pageSize: that.pageSize,
              cpage: that.currentPage
            }
          }
        ).then(function (response) {
          that.users = response.data.rows
          that.total = response.data.total
        })
      }
    },
    mounted() {
      this.page();
    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
